<template>
  <view class="login-main fx-center">
    <image class="logo" src="../../static/img/login.png"></image>
    <form @submit="submit">
      <view class="form-item">
        <view class="title">用户名</view>
        <input v-model="formData.username" class="uni-input" />
      </view>
      <view class="form-item">
        <view class="title">密&nbsp;&nbsp;&nbsp;码</view>
        <input v-model="formData.password" class="uni-input" password />
      </view>
      <view class="uni-btn-v">
        <button form-type="submit" type="primary" :disabled="isSubmit">
          立即登录
        </button>
      </view>
      <view class="other fx-center">
        <navigator class="link" url="/pages/user/forget">
          <view class="">
            忘记密码?
          </view>
        </navigator>
        <view class="line"> | </view>
        <navigator class="link" url="/pages/user/register">
          <view class="">
            立即注册
          </view>
        </navigator>
      </view>
    </form>
    <uni-popup ref="popup" type="message">
      <uni-popup-message type="error" :message="message"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      isSubmit: false,
      formData: {
        username: "",
        password: "",
        grant_type: "password",
        scope: "read",
      },
      message: "用户名或密码错误",
    };
  },
  methods: {
    async submit() {
      this.isSubmit = true;
      let res = await this.$api.getToken(this.formData);
      if (res.access_token) {
        this.$store.commit("setAccessToken", `${res.access_token}`);
        this.$store.commit("setToken", `${res.token_type} ${res.access_token}`);
        this.$store.commit("setUserInfo", res.userInfo);
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/gongzuo/index",
          });
        }, 100);
        this.isSubmit = false;
      } else {
        this.$refs.popup.open();
        this.isSubmit = false;
        setTimeout(() => {
          this.$refs.popup.close();
        }, 1500);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/static/less/flex.less";

.login-main {
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(130deg, #6dc9b7 5%, #3879cb);
  height: 100%;
  width: 100%;
  padding: 0 60upx 0;

  .logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 24%;
    margin: auto;
    width: 160upx;
    height: 140upx;
  }

  uni-form {
    padding-top: 200upx;
    width: 100%;
  }

  .form-item {
    margin-bottom: 60upx;
    width: 100%;
    position: relative;
    border-bottom: 2upx solid #ffffff;

    .title {
      position: absolute;
      left: 0;
      bottom: 20upx;
      font-size: 32upx;
      color: #fff;
    }

    /deep/.uni-input-input,
    .uni-input {
      height: 72upx;
      line-height: 72upx;
      font-size: 36upx;
      color: #ffffff;
      text-indent: 160upx !important;
    }
  }

  uni-button {
    background: linear-gradient(to bottom right, #4fb0e0 30%, #4fb0e0);
  }

  .other {
    margin-top: 40upx;
    color: #fff;
    font-size: 28upx;

    .line {
      margin: 0 10upx;
    }
  }
}

.message {
}
</style>
